<template>
    <div :style="`width:${width};height:${height}`" class="div2">
        <div class="div2-title">
            <div class="div2-title-icon">{{ title }}</div>
            <span>{{ desc }}</span>
        </div>
        <div style="height: calc(100% - 30px);padding: 20px 0 0 20px;">
            <slot name="content"></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        // 宽
        width: {
            type: String,
            default: () => "100%"
        },
        // 高
        height: {
            type: String,
            default: () => ""
        },
        // 标题
        title: {
            type: String,
            default: () => ""
        },
        // 描述
        desc: {
            type: String.apply,
            default: () => ""
        }
    }
}
</script>
<style lang="scss">
.div2 {
    background: #fff;
    margin-top: 20px;
    padding: 20px 20px 20px 0;
    box-sizing: border-box;

    &-title {
        display: flex;
        height: 30px;
        line-height: 30px;


        &-icon {
            width: 100px;
            height: 30px;
            color: #fff;
            font-size: 14px;
            background: #27aaa4;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        p {
            margin-left: 20px;
            width: 80%;
            text-align: left;
            font-weight: 600;
        }

        span {
            flex: 1;
            text-align: right;
            display: inline-block;
            font-size: 14px;
            color: #666;
        }
    }


}
</style>